<template>
    <view class="context">
        <view v-show="addresslength < 1" @click="goAdderss" class="address flex-b">
            <view class="flexC rightPos">
                <image class="position" mode="aspectFit" src="@/static/image/make/position.png"></image>
                <view v-show="!address.hasOwnProperty('id')" class="pleaseSelect">请点击选择地址</view>
                <view v-show="address.hasOwnProperty('id')" class="add_text">
                    <view class="name">{{ address.name }}<text>{{ address.tel }}</text></view>
                    <view>{{ address.address_title }} {{ address.address }}</view>
                </view>
            </view>
            <image mode="aspectFit" class="rightClick" src="@/static/image/make/rightClick.png"></image>
        </view>
        <view v-show="addresslength > 0" class="ckaddress">
            <view class="ckdz">服务地址：</view>
            <view class="ckdzxq">默认使用上一次的预约地址</view>
        </view>
        <view class="prompt">
            <view>订单状态显示“待核销”即为预约成功，临近春节，服务力紧张，我们会尽量为您安排。如果不能准时服务，支持全额退款</view>
            <view v-show="addresslength > 0"></view>
        </view>
        <view class="choice">
            <uv-input v-model="reservation_time" @tap="$refs.timePopup.open()" border="bottom" placeholder="服务者将在此时段内上门"
                readonly>
                <template v-slot:prefix>
                    <view class="title required">上门时段</view>
                </template>
                <template v-slot:suffix>
                    <image class="rightIcon" src="@/static/image/payment/arrow.png"></image>
                </template>
            </uv-input>
            <uv-input v-model="r_title" @tap="$refs.remarksPopup.open()" border="bottom" placeholder="请选择备注" readonly>
                <template v-slot:prefix>
                    <view class="title">选择备注</view>
                </template>
                <template v-slot:suffix>
                    <image class="rightIcon" src="@/static/image/payment/arrow.png"></image>
                </template>
            </uv-input>
            <uv-input v-model="remark" border="bottom" placeholder="请输入补充信息">
                <template v-slot:prefix>
                    <view class="title">补充信息</view>
                </template>
            </uv-input>
        </view>
        <view @click="setBooking" class="mainBtn buttons">确定</view>
        <uv-popup round="25" mode="bottom" ref="timePopup" :safeAreaInsetBottom="false">
            <select-time @timeConfirm="timeConfirm" />
        </uv-popup>
        <uv-popup round="25" mode="bottom" ref="remarksPopup" :safeAreaInsetBottom="false">
            <remarks @remarksConfirm="remarksConfirm" title="选择备注" :list="remarkList" />
        </uv-popup>
    </view>
</template>
<script>
import selectTime from '@/components/selectTime/selectTime.vue'
import remarks from '@/components/remarks/remarks.vue'
import { getGoodsDetails, remarksList } from '@/api/home.js'
export default {
    components: {
        selectTime,
        remarks
    },
    data() {
        return {
            id: null,
            constData: {},
            address: {},
            remarkList: [],
            constDataSkus: [],
            r_title: '',
            skusPrice: [],
            r_id: null,
            reservation_time: '',
            remark: '',
            code: '',
            orderid: "",
            ckType: null,
            addresslength: 0,
            createTime: null,
            is_use_limit: null,
            buyMore: 0
        }
    },
    onLoad(option) {
        this.id = option.id
        this.buyMore = option.buymore
        this.rderDetails(this.id)
        this.setRemarks()
        uni.$on('address', (adr) => {
            this.address = adr
        })
    },
    onUnload() {
        uni.$off('address')
    },
    methods: {
        setBooking() {
            if (this.addresslength > 0) {
                this.address.id = this.constData.address_id
            }
            if (!this.address.hasOwnProperty('id')) {
                this.$showToast('请选择服务地址')
                return false
            }
            if (!this.reservation_time) {
                this.$showToast('请选择服务时间')
                return false
            }
            uni.showLoading({ title: "加载中" });
            const { product_id, actual_amount, product_name, image_list_images } =
                this.constData;
            var order_amount = actual_amount;
            const createOrder = (
                skuList,
                totalAmount,
                reservation_time,
                remark,
                address_id,
                r_id,
                successCallback,
                failCallback,
                completeCallback
            ) => {
                tt.createOrder({
                    skuList: skuList,
                    payment: {
                        totalAmount: totalAmount,
                    },
                    callbackData: {
                        reservation_time: reservation_time,
                        remark: remark,
                        address_id: address_id,
                        r_id: r_id
                    },
                    success: successCallback,
                    fail: failCallback,
                    complete: completeCallback,
                });
            };
            const generateSku = (
                skuList,
                product_id,
                product_name,
                image_list_images,
                constDataSkus
            ) => {
                skuList.push({
                    skuId: product_id,
                    quantity: 1,
                    price: order_amount * 100,
                    skuType: 1,
                    goodsInfo: {
                        goodsName: product_name,
                        goodsPhoto: image_list_images[0],
                        goodsId: product_id,
                        goodsType: 1,
                    },
                });
                constDataSkus.forEach((element) => {
                    if (Number(this.buyMore) > 0) {
                        skuList.push({
                            skuId: element.skuId,
                            quantity: Number(this.buyMore),
                            price: element.price * 100,
                            skuType: 2,
                            goodsInfo: {
                                goodsName: product_name,
                                goodsPhoto: image_list_images[0],
                                goodsId: product_id,
                                goodsType: 1,
                            },
                        });
                        order_amount =
                            Number(order_amount) + element.price * this.buyMore;
                    }
                });
                if (skuList.length > 1) {
                    skuList[0].skuType = 2;
                }
            };
            const skuList = [];
            generateSku(
                skuList,
                product_id,
                product_name,
                image_list_images,
                this.constDataSkus
            );
            const reservation_time = this.reservation_time;
            const remark = this.remark;
            const address_id = this.address.id;
            const r_id = this.r_id
            createOrder(
                skuList,
                order_amount * 100,
                reservation_time,
                remark,
                address_id,
                r_id,
                (res) => {
                    if (res) {
                        const orderid = res.orderId;
                        uni.redirectTo({
                            url: `/pages/orderDetails/orderDetails?id=${orderid}`
                        })
                    }
                },
                (arr) => {
                    if (arr.outOrderNo) {
                        this.$showToast("支付取消");
                    } else {
                        this.$showToast("支付失败");
                    }
                },
                () => {
                    uni.hideLoading();
                }
            );
        },
        remarksConfirm(param) {
            this.r_title = param.title
            this.r_id = param.id
            this.$refs.remarksPopup.close()
        },
        timeConfirm(param) {
            this.reservation_time = param
            this.$refs.timePopup.close()
        },
        goAdderss() {
            uni.navigateTo({
                url: '/pages/address/address?item=select'
            })
        },
        setRemarks() {
            remarksList().then(res => {
                if (res.code === 1) {
                    this.remarkList = res.data
                }
            })
        },
        rderDetails(id) {
            getGoodsDetails({
                id: id,
            }).then((res) => {
                if (res.code === 1) {
                    this.constData = res.data;
                    this.ckType = res.data.product_type
                    if (res.data.skus !== undefined) {
                        this.constData.skus.forEach((element) => {
                            element.buyMore = 0;
                            this.skusPrice[element.skuId] = element.price;
                        });
                    }
                    this.constDataSkus = this.constData.skus;
                    this.load = true;
                } else {
                    this.$showToast(res.msg)
                }
            });
        }
    }
}
</script>

<style scoped lang="scss">
@import url('@/static/css/base.scss');

.context {
    padding: 30rpx 35rpx;
}

.buttons {
    margin-top: 60rpx;
}

.ckaddress {
    background-color: #FFFFFF;
    border-radius: 7px;
    padding: 56rpx 56rpx;
    display: flex;

    .ckdz {
        color: #1C2023;
        font-size: 28rpx;
        font-weight: bold;
    }

    .ckdzxq {
        font-size: 28rpx;
        font-weight: bold;
        color: red;
    }

}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 160rpx;
    padding: 0 100rpx;

    button {
        background-color: #edbd1d;
        color: #333;
        border-radius: 85rpx;
        border-color: #edbd1d;
        height: 85rpx;
        width: 100%;
        font-size: 28rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        letter-spacing: 4rpx;

        &::after {
            content: none;
        }
    }
}

.bottom {
    margin-top: 30rpx;
    background-color: #FFFFFF;
    padding: 30rpx;
    border-radius: 20rpx;
}

.information {
    margin-top: 20rpx;
    color: #686868;
    font-size: 27rpx;

    .actual {
        color: #1C2023;
        font-weight: bold;

        view:nth-child(2) {
            color: #FF8104;
        }
    }

    .price {
        margin-top: 22rpx;
        padding-top: 15rpx;
        border-top: #E4E4E4 1rpx solid;

        .price_item {

            view:nth-child(1),
            view:nth-child(2) {
                color: #1C2023;
                font-weight: bold;
            }
        }
    }

    .marginTop {
        margin-top: 15rpx;
    }

    .number {
        image {
            width: 25rpx;
            height: 25rpx;
            margin-left: 10rpx;
        }

        text {
            color: #424242;
            padding-left: 20rpx;
        }
    }
}

.tankuang {
    .popup {
        width: 600rpx;

        .pay {
            font-size: 35rpx;
            font-weight: bold;
            margin-top: 20rpx;
            margin-bottom: 16rpx;
            letter-spacing: 6rpx;
        }

        .make {
            padding: 0 28px;
            font-size: 32rpx;
        }

        .btns {
            width: 360rpx;
            height: 76rpx;
            background: #ff8104;
            border-radius: 37rpx;
            font-weight: 400;
            color: #ffffff;
            font-size: 32rpx;
            text-align: center;
            margin-top: 36rpx;
            letter-spacing: 6rpx;
            line-height: 76rpx;
            margin-bottom: 60rpx;
        }
    }
}

.commodity {
    .number {
        image {
            width: 25rpx;
            height: 25rpx;
            margin-left: 10rpx;
        }

        text {
            color: #424242;
            padding-left: 20rpx;
        }
    }

    .commodity_text {
        flex: 1;
        color: #1C2023;

        view:nth-child(2) {
            font-weight: 300;
            font-size: 26rpx;
            margin-top: 15rpx;
        }

        view:nth-child(3) {
            font-weight: 400;
            font-size: 26rpx;
            margin-top: 25rpx;
        }

        .commodity_title {
            view:nth-child(1) {
                font-weight: bold;
                font-size: 29rpx;
                padding-right: 20rpx;
            }

            view:nth-child(2) {
                font-weight: bold;
                font-size: 23rpx;
            }
        }
    }

    image {
        width: 200rpx;
        height: 200rpx;
        margin-right: 33rpx;
    }
}

.prompt {
    display: flex;
    color: red;
    font-size: 24rpx;
    margin-top: 20rpx
}

.choice {
    background-color: #FFFFFF;
    border-radius: 15rpx;
    margin-top: 20rpx;
    padding: 30rpx 25rpx;
    display: flex;
    flex-direction: column;
    row-gap: 15rpx;

    .title {
        color: #1C2023;
        font-size: 28rpx;
        font-weight: bold;
        width: 150rpx;
    }

    .rightIcon {
        width: 20rpx;
        height: 20rpx;
    }
}

.address {
    background-color: #FFFFFF;
    border-radius: 15rpx;
    padding: 60rpx 30rpx;

    .rightPos {}

    .position {
        width: 50rpx;
        height: 50rpx;
        margin-right: 21rpx;
    }

    .rightClick {
        width: 30rpx;
        height: 30rpx;
    }

    .pleaseSelect {
        font-size: 30rpx;
        color: #767a82;
    }

    .add_text {
        font-size: 31rpx;
        color: #1C2023;
        width: calc(100% - 71rpx);

        .name {
            margin-bottom: 5rpx;

            text {
                color: #4E4E4E;
                font-size: 25rpx;
                padding-left: 30rpx;
            }
        }
    }
}
</style>